<template>
  <section class="content clearfix">
    <div class="col-sm-2">
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">筛选查询</h3>
        </div>
        <form class="form-horizontal">
          <div class="box-body">
            <div style=''>
              <div class="tree">
                <nav class='navbar'>
                  <ul class='nav nav-stacked'>
                    <template v-for='item in menus'>
                      <li role='presentation' v-if='!item.children'><a href="javascript:void(0);">{{item.text}}</a></li>
                      <li role='presentation' v-if='item.children'><a href="javascript:void(0);" v-on:click='toggleChildren(item)'>{{item.text}}<span class='glyphicon pull-right' v-bind:class='{ "glyphicon-chevron-right": !item.expanded, "glyphicon-chevron-down": item.expanded }'></span></a>
                        <ul v-show='item.expanded' class="childs">
                          <li v-for='child in item.children'><a href="javascript:void(0);">{{child.text}}</a></li>
                        </ul>
                      </li>
                    </template>
                  </ul>
                </nav>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="col-sm-10">
      <!--查询条件-->
      <div class="box box-info">
        <div class="box-header with-border">
          <h3 class="box-title">筛选查询</h3>
        </div>
        <form class="form-horizontal">
          <div class="box-body">
            <div class="col-sm-6">
              <div class="form-group">
                <label for="" class="control-label">输入搜索</label>
                <div>
                  <input type="text" class="form-control" placeholder="分类名称">
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="form-group">
                <label class="control-label"></label>
                <div class="form-control no-border">
                  <button class="btn btn-info">查询结果</button>
                </div>
              </div>
            </div>
          </div>
        </form>
      </div>
      <!--查询条件end-->


      <!--数据展示-->
      <div class="box box-info">
        <div class="row">
          <div class="col-xs-12">
            <div class="box-header with-border">
              <h3 class="box-title">数据列表</h3>
              <button type="button" class="btn btn-success pull-right m-r-10" @click='toPath("/product/singleSKU")'>批量删除</button>
              <router-link class="btn btn-success pull-right m-r-10" to="/product/AddAttributes">添加</router-link>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
              <table id="example3" class="table table-bordered table-hover">
                <thead>
                <tr>
                  <th>
                    <label>
                      <input type="checkbox" class="flat-red">
                    </label>
                  </th>
                  <th>属性名称</th>
                  <th>录入方式</th>
                  <th>可选值列表（g）</th>
                  <!--<th>尺寸</th>-->
                  <!--<th>销量（7/30）</th>-->
                  <!--<th>状态</th>-->
                  <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td>
                    <label>
                      <input type="checkbox" class="flat-red">
                    </label>
                  </td>
                  <td>笔记本电脑</td>
                  <td>笔记本电脑</td>
                  <td class="text-left">
                    <label for="" class="btn btn-info">Red</label>
                    <label for="" class="btn btn-info">Red</label>
                    <label for="" class="btn btn-info">Red</label>
                  </td>
                  <td>
                    <a href="javascript:;" class="text-green m-lr-10">编辑</a>
                    <a href="javascript:;" class="text-green m-lr-10">禁用</a>
                    <a href="javascript:;" class="text-green m-lr-10">删除</a>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
            <!-- /.box-body -->
            <!-- /.box -->
          </div>
          <!-- /.col -->
        </div>
      </div>
      <!--数据展示end-->
    </div>
  </section>
</template>

<script>

  import vueZtree from '@/components/common/vue-ztree';
  import CommodityAttribute from '@/js/product/CommodityAttribute'
  export default {
    name:'CommodityAttribute',
    methods: {
      toggleChildren: function(item) {
        item.expanded = !item.expanded;
      },
    },
    data() {
      return {
        menus:[{
          text:'水果',
          expanded:false,
          children:[{
            text:'苹果',
          },{
            text:'荔枝'
          },{
            text:'葡萄'
          },{
            text:'火龙果'
          }]
        },{
          text:'好吃的',
          expanded:false,
          children:[{
            text:'糖',
          },{
            text:'面包'
          },{
            text:'火腿'
          },{
            text:'薯片'
          },{
            text:'碎碎面'
          }]
        },{
          text:'饮料',
          expanded:false,
          children:[]
        }]
      }
    },
    created(){
      this.$nextTick(function () {
        CommodityAttribute.main.init("#example3");
      })
    }
  }
</script>

<style scoped>

</style>

